<template>
    <div class="StartSellOrderCheck">
        <div class="container">
            <div class="f-row f-j-between f-a-center">
                <p><span>出售订单</span><strong class="DIN-Medium"> 201909062908089</strong></p><p><gy-icon style="font-size: 0.24rem;color: #E02020;" font-name="icon-icon_clock"/><span class="time">自动取消 00:10:00</span></p>
            </div>
            <p><span>出售数量</span><strong class="DIN-Medium">20</strong><span>个</span></p>
            <p><span>出售价格</span><strong class="DIN-Medium">13.2</strong><span>元/ADS</span></p>
            <p><span>支付金额</span><strong class="DIN-Medium">264 </strong><span>元</span></p>
        </div>
        <div class="content">
            <img class="qrCode" src="../../assets/logo.png" alt="">
        </div>
        <div class="content">
            <span class="message">请用微信扫码支付给到此收款码账户，支付完成后点击已完成支付，当卖家确认收到款项后，会自动释放ADS到买家账户。</span>
        </div>
        <div class="bottom f-row f-j-center f-a-center">
            <div class="submitButton">完成支付</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import {NAV_BAR_INFO} from "@/store/MutationTypes";
import GyIcon from "@/components/GyIcon.vue";
import {GColor} from "@/common/gview/base/GEnum";
@Component({
    name: 'StartSellOrderCheck',
    components: {GyIcon}
})
export default class extends Vue {
    private mounted(): void {
        let __this = this;
        this.$common.scrollToTop();
        this.$store.dispatch(NAV_BAR_INFO, {
            leftItem: {
                name: '取消',
                click: () => {
                    __this.$common.confirm(
                        '取消订单',
                        '取消订单，您要确认么',
                        [
                            {
                                text: '确定',
                                callback: () => {
                                    __this.$router.push('/start-sell-order')
                                }
                            },
                            {
                                text: '我在想想',
                                color: GColor.normal
                            }
                        ]
                    );
                }
            }
        })
    }
}
</script>

<style scoped lang="less">
.StartSellOrderCheck {
    padding: 0.2rem 0.3rem;
    & .container {
        background-color: white;
        border-radius: 0.1rem;
        margin-bottom: 0.2rem;
        padding: 0.2rem 0.5rem;
        & p {
            line-height: 0.6rem;
            text-align: left;
            & strong {
                font-size: 0.36rem;
                color: #666666;
                padding: 0 0.1rem;
            }
            & span {
                font-size: 0.24rem;
                color: #999999;
            }
        }
        & .f-row {
            & strong {
                color: black;
                font-size: 0.24rem;
            }
            & .time {
                color: #E02020;
                font-size: 0.24rem;
            }
        }
    }
    & .content {
        padding: 0;
        margin-bottom: 0.2rem;
        & .qrCode {
            width: 6.9rem;
            height: 6.9rem;
            border-radius: 0.1rem;
        }
        & .message {
            font-size: 0.24rem;
            color: #000000;
            text-align: left;
        }
    }
    & .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1.74rem;
        background-color: white;
        z-index: 2;
        &:after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            height: 1px;
            background-image: linear-gradient(
                    0deg,
                    transparent 61%,
                    rgba(0, 0, 0, 0.3) 100%
            );
        }
    }
}
</style>
